<template>
    <div>
        <Modal v-model="modal" class="modal-full" title="规则明细" width="90%">
            <div>
                <Spin size="large" fix v-show="dataLoading"></Spin>
                <FormSet ref="form" @formInput="formInput" module="form" :labelWidth="80" :model="formModel" :col="4"></FormSet>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button type="primary" @click="actionSubmit">确认</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import Modal from "@/element/modal";
import FormSet from "@/components/form";
import Base from "../moduleModal";
import model from "./model";
import tableList from "@/components/localGridPanel/index";
import tableEditor from "@/components/gridTableEditor/index";
import { link } from "@/common";
export default {
  subModuleStore: true,
  extends: Base,
  props: {},
  data() {
    return {
      actionRule: true,
      path: {
        find: "service/{app}/rule/{code}",
        put: "service/{app}/rule"
      },
      hasParam: false,
      conditionModel: model.details,
      paramModel: model.param,
      dataLoading: false
    };
  },
  computed: {
    formModel() {
      return {
        ...this.$owner.model,
        slaves: [model.param, model.details]
      };
    }
  },
  methods: {
    formInput({ code, value }) {
      //this.hasParam = this.moduleState.form && this.moduleState.form.formData.exp_type === 'data'
    },
    actionSubmit() {
      var data = this.$refs.form.getData
        ? this.$refs.form.getData()
        : this.$refs.form.formData;
      data.details.forEach(item => {
        item.matched = item.matched === "3";
      });
      link(this.path.put, data, {
        method: "put"
      }).then(() => {
        this.close();
        this.$parent.actionSuccess();
        this.$owner.update();
      });
    },
    load() {
      if (this.$parent.actionData && this.$parent.actionData.id) {
        this.dataLoading = true;
        link(this.path.find, null, {
          method: "GET",
          param: this.$parent.actionData
        })
          .then(res => {
            this.$commit("form/setData", res.data);
            res.data.details.forEach(item => {
              item.matched = item.matched ? "3" : "0";
            });
          })
          .finally(() => {
            this.dataLoading = false;
          });
      } else {
        this.$commit("form/setData", {});
      }
    },
    getExecModel() {
      if (this.moduleState.form && this.moduleState.form.params) {
        var fields = this.moduleState.form.params.listData || [];

        return {
          fields: fields.filter(field => {
            return field.scope !== "param";
          })
        };
      } else {
        return {
          fields: [],
          slaves: []
        };
      }
    }
  },
  components: {
    Modal,
    FormSet,
    tableList,
    tableEditor
  }
};
</script>

<style lang="less">
.table-set {
  margin: 15px 0;
  h4 {
    margin: 10px 0;
  }
}
</style>
